<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="/WEB-INF/page/include.inc.jsp"%>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	
	<style type="text/css">
		label.error{
			color:red;
			font-size:14px;
			margin-left:5px;
			padding-left:18px;
			background:url("<%=request.getContextPath()%>/styles/plugins/validate/images/error.png") left no-repeat;
		}
	</style>
	
	<script>
		function fixWidth(percent) {  
	        return document.body.clientWidth * percent;  
	    }
		
		$(document).ready(function() {
			//queryRole();
			initCurrTime();
			validate();
			
			//$('#d2').dialog('close');
			//selectRole();
		});
		
		function queryRole() {
			var obj = document.getElementById("roleId");
			$.post('queryRole', {}, function(data) {
				for(var i=0; i<data.rows.length; i++) {
					obj.options.add(new Option(data.rows[i].name, data.rows[i].id));
				}
			});
		}
		
		function validate() {
			meta:"validate",
			$("#formId").validate({
				submitHandler: function(form) {
		            submitForm('操作员管理');
		        },
				rules: {
					"id": {required: true, minlength: 2},
					"pwd": {required: true},
					phone: "required"
				}
			});
		}
		
		function selectRole() {
			$("#selectRole").click(function() {
				$('#d2').dialog({
					title: "选择",
				    modal: true,
				    cache: false,
				    href: "goSelectRole",
				    width:fixWidth(0.8),
				    maximizable: true,
				    buttons:[{
						text:'关闭',
						handler:function(){
							$('#d2').window('close');
						}
					},{
						text:'保存',
						handler:function() {
							var store = $('#tableId').datagrid("getSelections");
							var bindStore="";
							var storeNames="";
							for(var a=0; a<store.length; a++) {
								bindStore+=store[a].id+",";
								storeNames+=store[a].name+",";
							}
							bindStore=bindStore.substring(0,bindStore.length-1);
							storeNames=storeNames.substring(0,storeNames.length-1);
							$("#storeName").html(storeNames);
							$('#d2').window('close');
						}
					}]
				});
			});
		}
		
		function submitForm(tabName) {
		    $("#formId").ajaxSubmit(function(data) {
		    	var obj = eval ("(" + data + ")");
		    	if (obj.success) {
					msgAlert('信息提示', '操作成功', 'info', function() {
						self.parent.refreshTab(tabName);
						self.parent.closeCurrTab();
					});
				}
				else {
					msgAlert('错误提示', obj.message, 'error', null);
				}
		    });
		}
	</script>
</head>
<body>
	<div style="padding:20px 0px 10px 100px">
        <form id="formId" name="formId" action="add" method="post">
            <table>
            	<tr>
                    <td style="">用户名:</td>
                    <td><input type="text" name="id"></input></td>
				</tr>
				<tr>
                    <td>密码:</td>
                    <td><input type="text" name="pwd" value="1"></input></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name" class="{validate:{required:true,email:true}}"></input></td>
                </tr>
				<tr>
                    <td>性别:</td>
                    <td>
                    	<input type="radio" name="sex" value="1">男</input>
                    	<input type="radio" name="sex" value="2">女</input>
                    </td>
                </tr>
                <tr>
                    <td>出生日期:</td>
                    <td><input type="text" name="birthDate" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy/MM/dd'})"></input></td>
                </tr>
				<tr>
                    <td>住址:</td>
                    <td><input type="text" name="address"></input></td>
                </tr>
                <tr>
                    <td>手机:</td>
                    <td><input type="text" name="mobile"></input></td>
                </tr>
				<tr>
                    <td>电话 :</td>
                    <td><input type="text" name="phone"></input></td>
                </tr>
                <tr>
                    <td>角色:</td>
                    <td>
	                    <select id="roleId" name="roleId" style="width: 150px">
	                    	<option value="">请选择</option>
	                    	<c:forEach items="${roleList}" var="role">
	                    		<option value="${role.id}">${role.name}</option>
	                    	</c:forEach>
	                    </select>
	                    <!-- <span id="storeName"></span>
	                    <input id="selectRole" type="button" value="选择角色"/> -->
                    </td>
                </tr>
            </table>
            
			<div style="padding:20px 0 10px 70px">
				<input class="button" type="submit" value="提交"></input>
				<input class="button" type="button" value="取消" onclick="self.parent.closeCurrTab();"></input>
			</div>
        </form>
	</div>
    
    <!-- <div id="d2" class="easyui-dialog" style="top:50px; left:100px;"></div> -->
</body>
</html>
